<template>
  <div class="test-page">
    <h1>前端测试页面</h1>
    <p>如果您看到这个页面，说明前端基本工作正常</p>

    <el-button type="primary" @click="testMessage">测试消息</el-button>
    <el-button @click="testRouter">测试路由</el-button>

    <div class="test-info">
      <h3>环境信息</h3>
      <p>Vue版本: {{ vueVersion }}</p>
      <p>当前路由: {{ currentRoute }}</p>
      <p>时间: {{ currentTime }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { version } from 'vue'

const route = useRoute()
const router = useRouter()

const currentTime = ref(new Date().toLocaleString())
const vueVersion = version

const currentRoute = computed(() => route.path)

const testMessage = () => {
  ElMessage.success('Element Plus工作正常！')
}

const testRouter = () => {
  ElMessage.info(`当前路由: ${route.path}`)
}
</script>

<style lang="scss" scoped>
.test-page {
  padding: 40px;
  max-width: 800px;
  margin: 0 auto;

  h1 {
    color: #409eff;
    margin-bottom: 20px;
  }

  .test-info {
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;

    h3 {
      margin-top: 0;
      color: #303133;
    }

    p {
      margin: 8px 0;
      color: #606266;
    }
  }
}
</style>